<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>饿了吗</title>
    <style>
        html,
        body {
            margin: 0;
        }

        #d1 {
            width: 100%;
            display: flex;
            padding: 4vw 0;
        }

        #l1 {
            width: 18vw;
        }

        #r1 {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            align-content: space-around;
        }


        #l2 i {
            font-style: normal;
            font-size: 3vw;
            font-weight: bold;
            padding: 0.32vw 0.67vw;
            background-color: rgba(235, 220, 0, 0.8);
            color: brown;
            vertical-align: top;

        }

        #l2 span {
            font-size: 4vw;
            font-weight: bold;
        }

        #r2 span {
            font-size: 2.5vw;
            color: rgba(102, 102, 102, 0.7);
            border: 1px solid rgba(102, 102, 102, 0.15);
            margin-right: 2vw;
        }

        #l1 img {
            width: 18vw;
            height: 18vw;
        }

        #d2 {
            width: 100%;
            height: 8vw;
            display: flex;
            justify-content: space-between;
            line-height: 8vw;

        }

        #d3 {
            width: 100%;
            height: 8vw;
            line-height: 8vw;
        }

        #d3 img {
            height: 3vw;
            width: 16vw;
        }

        #d3 span {
            font-size: 3vw;
            padding: 0 1vw;
        }

        #d4 {
            width: 100%;
            height: 8vw;
            display: flex;
            line-height: 8vw;
            justify-content: space-between;
        }

        #d4 #l3 span {
            font-size: 2.8vw;
            padding: 0 1vw;
            color: rgba(102, 102, 102, 0.9)
        }

        #d4 #l3 span:nth-of-type(1) {
            border-right: 1px solid rgba(102, 102, 102, 0.2);
        }

        #d4 #r3 span {
            color: rgb(153, 153, 153);
            font-size: 2.6vw;
            padding: 0 1vw;
        }

        #d4 #r3 span:nth-of-type(2) {
            border-left: 1px solid rgba(102, 102, 102, 0.2);
            margin-right: 1vw;
        }

        #d5 {
            width: 100%;
            height: 10vw;
            color: rgb(232, 71, 11);
            font-size: 2.6vw;
            line-height: 10vw;
        }

        #d5 img {
            width: 2.5vw;
            height: 2.5vw;

        }

        #d6 {
            width: 100%;
            height: 6vw;
            line-height: 6vw;
            display: flex;
            justify-content: space-between;
        }

        #d6 #l4 span {
            font-size: 2.7vw;
            padding: 0 0.7vw;
            color: rgba(102, 102, 102, 1);
        }

        #d6 #l4 span:nth-of-type(1) {
            color: white;
            background-color: rgb(112, 188, 70);
            padding: 0.4vw;
            border-radius: 3px;
        }

        #d6 #r4 span {
            color: rgb(153, 153, 153);
            font-size: 2.6vw;
            padding: 0 1vw;
        }

        #d6 #r4 img {
            width: 2vw;
            height: 1vw;
            vertical-align: middle;
            margin-right: 2vw;
        }

        #d7 {
            width: 100%;
            height: 6vw;
            line-height: 6vw;
        }

        #d7 span {
            font-size: 2.7vw;
            padding: 0 0.7vw;
            color: rgba(102, 102, 102, 1);
        }

        #d7 span:nth-of-type(1) {
            color: white;
            background-color: rgb(240, 115, 115);
            padding: 0.4vw;
            border-radius: 3px;
        }
    </style>
</head>

<body>
    <div id="d1">
        <div id="l1">
            <img src="logo.jpeg" alt="">
        </div>
        <div id="r1">

            <div id="d2">
                <div id="l2">
                    <i>品牌</i>
                    <span>德克士（金泰广场店）</span>
                </div>
                <div id="r2">
                    <span>票</span>
                </div>


            </div>

            <div id="d3">
                <img src="xing.svg" alt="">
                <span>4.8</span>
                <span>月首1594单</span>
            </div>

            <div id="d4">
                <div id="l3">
                    <span>￥20起送</span>
                    <span>配送费￥5.98</span>
                </div>
                <div id="r3">
                    <span>4.34km</span>
                    <span>32分钟</span>
                </div>
            </div>

            <div id="d5">
                <img src="icon.png" alt="">
                <span>口碑人气好店</span>
            </div>

            <div id="d6">
                <div id="l4">
                    <span>首</span>
                    <span>新用户下单立减17元</span>
                </div>
                <div id="r4">
                    <span>10个活动</span>
                    <img src="sj.svg" alt="">
                </div>
            </div>

            <div id="d7">
                <span>减</span>
                <span>满40减20，满80减40</span>
            </div>
        </div>
    </div>
</body>

</html>